<template>
    <div class="step2">
        <a-row :gutter="[5, 5]" type="flex">
            <a-checkable-tag
                v-for="(v, k) in tags"
                :key="k"
                style="margin-bottom: 5px"
                @change.native="checkTag(k)"
                v-model="checkTags[k]"
            >
                {{ v.w }}
            </a-checkable-tag>
        </a-row>
        <p class="row2">新的名称： {{ newName }}</p>
    </div>
</template>
<script>
    import { segmentText } from '../../util/file-action'
    export default {
        name: 'Step3',
        data() {
            return {
                checkTags: [],
                tags: [],
                newName: '空',
            }
        },
        watch: {
            checkTags: {
                handler(nval) {
                    let str = ''
                    for (const k in nval) {
                        if (nval[k]) {
                            str += this.tags[k].w
                        }
                    }
                    this.newName = str === '' ? '空' : str
                },
                deep: true,
            },
        },
        methods: {
            setTags() {
                console.log(this.$store.state.videos.curVideoName)
                this.tags = segmentText(this.$store.state.videos.curVideoName)
                for (const i in this.tags) {
                    this.checkTags[i] = false
                }
            },
            checkTag(k) {
                const { checkTags } = this
                this.$set(checkTags, k, !checkTags[k])
            },
            clearData() {
                this.tags = []
                this.checkTags = []
            },
        },
    }
</script>
<style lang="less">
    .step2 {
        .row2 {
            margin-top: 15px !important;
        }
    }
</style>
